<template>
  <div class="toper">
    <div class="top1">
      <div class="toper_nav">
        小米商城
        <span>|</span>
        MIUI
        <span>|</span>
        loT
        <span>|</span>
        云服务
        <span>|</span>
        天星数科
        <span>|</span>
        有品
        <span>|</span>
        小爱开放平台
        <span>|</span>
        企业团购
        <span>|</span>
        资质证照
        <span>|</span>
        协议规则
        <span>|</span>
        下载app
        <span>|</span>
        Select Location
      </div>
      <div class="left-item">
        <div class="user">
          登录
          <span>|</span>
          注册
          <span>|</span>
          消息通知
        </div>
        <div class="shoper_cart" @mouseenter="displayDetail" @mouseleave="displayDetail">
          <div class="cart">
            购物车
          </div>
          <div class="detail" :class="isCartActive ? 'active' : ''">
            ...
          </div>
        </div>
      </div>

    </div>
    <div class="top2">
      <div class="MI_LOGO"></div>
      <div class="top2_nav">
        <span>Xiaomi手机</span>
        <span>Redmi手机</span>
        <span>电视</span>
        <span>笔记本</span>
        <span>平板</span>
        <span>家电</span>
        <span>路由器</span>
        <span>服务</span>
        <span>社区</span>
      </div>
      <div class="head_search">
        <input type="text" name="search" id="search">
        <i class="ri-search-line"></i>
      </div>
    </div>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const isCartActive = ref(false)
    const displayDetail = () => {
      isCartActive.value = !isCartActive.value
    }
    return {
      isCartActive,
      displayDetail
    }
  }
}
</script>

<style>
.left-item {
  display: flex;
  height: 100%;
  align-items: center;
}

.shoper_cart {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 0 8px 0 8px;
  margin: 0 0 0 8px;
  height: 100%;
  background-color: #424242;
  transition: .3s;
  cursor: pointer;
  position: relative;
}


.shoper_cart:hover {
  background-color: white;
  color: #ff6700;
}

.top1 {
  display: flex;
  justify-content: space-between;
  background-color: #333;
  color: #b0b0b0;
  font-size: 12px;
  height: 40px;
  align-items: center;
  padding: 0 120px 0 120px;
}

.top2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 120px 24px 120px;
}

input {
  margin: 0;
  outline: 0;
  padding: 15px 20px;
  border: 1px solid #b0b0b0;
}

.ri-search-line {
  outline: 0;
  background-color: #fff;
  color: #333;
  padding: 15px 20px;
  border-top: 1px solid #b0b0b0;
  border-right: 1px solid #b0b0b0;
  border-bottom: 1px solid #b0b0b0;
  font-weight: bolder;
  transition: .3s;
  cursor: pointer;
}

.ri-search-line:hover {
  color: white;
  background-color: #ff6700;
  border-top: 1px solid #ff6700;
  border-right: 1px solid #ff6700;
  border-bottom: 1px solid #ff6700;
}


.head_search {
  display: flex;
  align-items: center;
}

.top2_nav {
  display: flex;
  gap: 12px;
}

.top2_nav span {
  transition: .3s;
  cursor: pointer;
}

.top2_nav span:hover {
  color: #ff6700;
}

.MI_LOGO {
  background: url(//s02.mifile.cn/assets/static/image/logo-mi2.png) no-repeat;
  background-size: 56px;
  width: 56px;
  height: 56px;
}

.shoper_cart>.cart {
  display: flex;
  height: 40px;
  align-items: center;
}

.shoper_cart>.detail {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  top: 40px;
  right: 0;
  width: 180px;
  height: 0px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1),
    0 0 35px rgba(0, 0, 0, 0.1);
  font-weight: bolder;
  font-size:20px;
  transition: .3s;
}

.shoper_cart>.detail.active {
  height: 80px;
}
</style>